<template>
  <transition>
    <div class="app-login">
      <section class="app-main">
        <div class="logo"><img src="static/img/logo12.png"/></div>
        <div class="module-form">
          <div class="input-content">
            <mt-field :class="{active:current=='1'}" class="addon-two" label="账号" placeholder="请输入账号" v-model="username" @keyup.enter.native="handleLogin" @focus.native.capture="phoneBlur('1')"></mt-field>
            <mt-field :class="{active:current=='2'}" class="addon-two" label="密码" placeholder="请输入密码" v-model="userpwd" type="password" @keyup.enter.native="handleLogin" @focus.native.capture="phoneBlur('2')"></mt-field>
          </div>
          <div class="action-find-pwd" @click="handleFindPwd">忘记密码</div>
          <div class="button-content">
            <mt-button type="danger" @click="handleLogin">立即登录</mt-button>
            <div class="none-tips">还没有账号？<a href="/store-settled-in">立即入驻</a></div>
          </div>
        </div>
      </section>
      <mt-popup
        v-model="contactPopup"
        position="middle" class="contact-popup">
        <div class="module">
          <div>请联系客服重置密码</div>
          <div>客服电话：<a href="tel:400-968-3360">400-968-3360</a></div>
          <div class="action-button">
            <mt-button type="default" @click="contactPopup=false">取消</mt-button>
          </div>
        </div>
      </mt-popup>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,Field,Button,Toast,Checklist,MessageBox} from 'mint-ui';
  export default {
    name: 'Login',
    components:{
      Header,
      Cell,
      Field,
    },
    data () {
      return {
        current:'',
        isRemember:'',
        username:'',
        userpwd:'',
        contactPopup:false,
      }
    },
    beforeDestroy: function() {
      document.body.removeAttribute("class","add_bg");
    },
    mounted(){
      document.getElementsByTagName("body")[0].className="add_bg";
    },
    methods:{
      phoneBlur(index){
        this.current=index
      },
      handleLogin(){
        if(this.username==''){
          Toast({
            message: '账号不能为空',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.userpwd==''){
          Toast({
            message: '密码不能为空',
            position: 'middle',
            duration:1000
          });
          return false;
        };
        var params = new URLSearchParams();

        params.append('username', this.username);
        params.append('password', this.userpwd);
        params.append('mobileLogin',1);
        const postData={
          'username':this.username,
          'password':this.userpwd,
          'mobileLogin':1
        }
        this.$store.dispatch('user/login', postData).then(() => {

          console.log(123456)
          if(typeof this.$route.query.redirect=='undefined'){
            setTimeout(()=>{
              this.$router.push({path:'/index'})},1500)
          }else{
            setTimeout(()=>{
              this.$router.push({path:this.$route.query.redirect})},1500)
          }
        }).catch(() => {
          alert(error);
        })
      },
      handleFindPwd(){
        this.contactPopup=true;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .add_bg{
    background: #fff;
  }
  .app-login{
    background: #fff;
  }
  .app-login .contact-popup{
    width:70%;
    padding:12px;
    border-radius:6px;
    font-size: 16px;
    line-height:30px;
  }
  .app-login .contact-popup .action-button{
    padding:10px 0 6px;
    text-align: center;
  }
  .app-login .contact-popup .action-button .mint-button{
    padding:6px 24px;
    height: 36px;
    font-size: 15px;
  }
  .app-login .action-find-pwd{
    padding:4px 0 18px;
    font-size: 16px;
    color:#007EE5;
    text-align: right;
  }
  .app-login .logo{
    padding:48px 134px 0;
    text-align: center;
  }
  .app-login .button-content .mint-button{
    background: -webkit-linear-gradient(left, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #03adf3 , #0080e5); /* 标准的语法 */
    display: block;
    width: 100%;
  }
  .app-login .module-form{
    padding:34px 30px 24px;
  }
  .app-login .input-content .mint-cell{
    background: none !important;
    position: relative;
    margin:0 0 18px;
    padding: 0 0 6px;
  }
  .app-login .input-content .mint-cell:before{
    background: #ddd;
    position: absolute;
    bottom:3px;
    width:100%;
    height: 1px;
    content: '';
    transition: all .3s;
  }
  .app-login .input-content .mint-cell:after{
    background: #007EE5;
    position: absolute;
    bottom:3px;
    width: 0;
    height: 1px;
    content: '';
    transition: all .3s;
  }
  .app-login .input-content .mint-cell.active:after{
       width: 100%;
     }
  .app-login .input-content .mint-cell.active .mint-cell-title{
    color: #007EE5;
  }
  .app-login .input-content .mint-field-core{
    font-size: 15px;
  }
  .app-login .input-content .mint-cell-title{
    width:76px;
    font-size: 15px;
  }
  .app-login .action-content{
    padding:0 0 24px;
    text-align: right;
  }
  .app-login .action-content .mint-checklist-title{
    margin: 0;
  }
  .app-login .action-content .mint-cell{
    background:none;
    min-height:inherit;
  }
  .app-login .action-content .mint-checkbox-core{
    border-radius:0
  }
  .app-login .action-content .mint-checklist-label{
    padding: 0;
  }
  .app-login .action-content .mint-cell-wrapper{
    background:none;
  }
  .app-login .input-content .mint-cell-wrapper{
    background:none;
    padding: 0 0 6px;
  }
  .app-login .none-tips{
    padding:16px 0 0;
    text-align: right;
    font-size: 15px;
    color: #444;
  }
  .app-login .none-tips a{
    color: #007EE5;
  }
  .app-login .addon-two .mint-cell-text{
    letter-spacing:22px;
  }
</style>

